<template>
  <div :class="['cube-attr-container ', attrsViewDrawer ? 'show' : 'hide']">
    <el-collapse-transition>
      <div v-show="attrsViewDrawer" class="cube-attr-view-drawer transition-box">
        <el-card
          shadow="never"
          class="cube-attr-view-card"
          :body-style="{ height: 'calc(83vh - 28px)', padding: '15px 0 0', overflowY: 'auto' }"
        >
          <div slot="header" class="clearfix">
            <span>属性</span>
          </div>
          <div>
            <el-form v-show="selectedObject.a1 != ''" :model="selectedObject" label-position="right" label-width="80px">
              <el-form-item :label="'长: '" v-show="selectedObject.type == '3d'">
                <el-input maxlength="80" v-model="cubeInfo.length" :disabled="selectedObject.type == '3d'" />
              </el-form-item>
              <el-form-item :label="'宽: '">
                <el-input maxlength="80" v-model="cubeInfo.width" :disabled="selectedObject.type == '3d'" />
              </el-form-item>
              <el-form-item :label="'高: '">
                <el-input maxlength="80" v-model="cubeInfo.height" :disabled="selectedObject.type == '3d'" />
              </el-form-item>
              <el-form-item :label="'内部点数: '" v-show="selectedObject.type == '3d'">
                <el-input
                  maxlength="80"
                  v-model="selectedObject.keyPointsCount"
                  :disabled="selectedObject.type == '3d'"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="selectedObject.type == '3d'">保存</el-button>
              </el-form-item>
              <el-form-item
                v-for="attribute in selectedObject.attributes"
                :key="attribute.key"
                :label="attribute.key + ': '"
              >
                <el-input v-model="attribute.value" maxlength="50" :readonly="attribute.key == '追踪Id'" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  name: 'CubeAttribute',
  props: {
    attrsViewDrawer: { type: Boolean, default: false },
    selectedObject: Object,
    cubeInfo: {
      type: Object,
      default: function () {
        return { length: '', width: '', height: '' }
      },
    },
  },
  data() {
    return {}
  },
  created() {},
  mounted() {
    window.addEventListener('resize', this.resize, false)
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrameId)
    window.removeEventListener('resize', this.resize, false)
  },
  watch: {
    selectedObject: function (val, oldVal) {
      // this.selectedObject = val;
      // console.log(val, this.selectedObject)
    },
  },
  methods: {
    resize() {},
  },
}
</script>
<style lang="scss" scoped>
.cube-attr-container {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1000;
  left: 80%;
}
.cube-attr-container.show {
  height: 83vh;
}
.cube-attr-container.hide {
  height: 0;
}
.cube-attr-view-btn {
  position: absolute;
  right: 44px;
  top: 0;
  z-index: 1001;
}
.cube-attr-view-drawer {
}
.cube-attr-view-card {
  width: 100%;
  border-radius: 0;
}
.cube-attr-view-card /deep/ .el-card__header {
  padding: 0 12px;
  line-height: 28px;
  height: 28px;
  min-height: auto;
}
</style>
